﻿@model VasilekCerozhka.Models.ViewModels.Product.UpdateProductVM

<div id="Idloader" class="loader-container">
    <span class="loader"></span>
</div>

<br />

@*<form asp-action="ProductEdit" onload="window.Images.addImages()">*@
<form asp-action="ProductEdit" id="IdForm" class="container form-glass" hidden>
    <input asp-for="UpdateProduct.ProductId" hidden />
    @*@for (int i = 0; i < Model.UpdateProduct.SecondaryImages.Count; i++)
    {
        <input asp-for="@Model.UpdateProduct.SecondaryImages[i].ImageId)" hidden />
        <input asp-for="@Model.UpdateProduct.SecondaryImages[i].ImageUrl)" hidden />
    }*@
    
    <br />
    <div class="container p-3">
        <h1 class="text-primary">Обновить продукт</h1>

        <hr />
        <div class="row mx-auto">

            <div class="col-3">




                <div class="pb-3 box">

                    @if (Model.UpdateProduct.ProductId != 0)
                    {
                        <div class="pb-2">
                            <label class="control-label pt-2" style="font-size:20px;text-align: center; width:100%;">Tекущие изображение</label>
                        </div>

                        <div class="main-card-add">

                            <div class="card-add">

                                <div class="card_add_effect_gloss_img">
                                    <img src="@Model.UpdateProduct.MainImageUrl" />
                                </div>

                            </div>
                        </div>

                    }
                    else
                    {
                        <img src="~/img/886fac756d43925eea0cb1e3643b0dfd.jpg" class="w-100" />
                    }

                </div>

                <div class="pb-3">
                    @if (Model.UpdateProduct.SecondaryImages.Count > 0)
                    {
                        <div class="pb-2">
                            <label class="control-label pt-2" style="font-size:20px;text-align: center; width:100%;">Tекущий список изображений</label>
                        </div>

                        <div id="carouselExampleDark" class="carousel carousel-blue slide carousel-fade" data-bs-ride="carousel">
                            <div class="carousel-inner effect_gloss_div">
                                @{
                                    int i = 0;
                                }
                                @foreach (var item in Model.UpdateProduct.SecondaryImages)
                                {
                                    i++;
                                    var active = i == 1 ? "active" : "";
                                    <div class="carousel-item @active" data-bs-interval="3900">
                                        <img src="@item.ImageUrl" alt="Image @item" class="d-block w-100 h-100">
                                    </div>
                                }
                            </div>
                        </div>
                    }
                    else
                    {
                        <img src="~/img/886fac756d43925eea0cb1e3643b0dfd.jpg" class="w-100"/>
                    }
                </div>

            </div>

            <div class="col-6 px-5 mt-3">

                <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                <div class="form_input_custom">
                    <input asp-for="UpdateProduct.ProductName" required autocomplete="on" />

                    <label asp-for="UpdateProduct.ProductName" for="name" class="label_name_input">
                        <span class="content_name_input">Наименование</span>
                    </label>
                    <span asp-validation-for="UpdateProduct.ProductName" class="text-danger"></span>
                </div>

              @*  Выподающий списсок*@

                <div class="sel sel--black-panther">
                    <select asp-for="paramsCategory" asp-items="@Model.SelectCategorys">
                        <option value="" disabled>@Model.UpdateProduct.Category.CategoryName</option>
                    </select>

                    <label for="name" class="label_name_select">
                        <span class="content_name_select">Категории</span>
                    </label>
                </div>

                <div class="col-12 pt-4">

                    <label id="id_label_textareaSD" class="label_textarea">Краткое описание</label>

                    <div id="borderIdSD" style="width: 100%;">
                        <textarea asp-for="UpdateProduct.ShortDescription" id="id_textareaSD" class="textarea_custom" 
                            onblur="TextareaEmpty('id_label_textareaSD','id_textareaSD','borderIdSD','id_span_labelSD')" 
                            onclick="TextareaChangesStyle('id_label_textareaSD','id_textareaSD','borderIdSD','id_span_labelSD')"></textarea>
                    </div>
                    <span id="id_span_labelSD" class="span_label_textarea"></span>

                    <span asp-validation-for="UpdateProduct.ShortDescription" class="text-danger"></span>
                </div>

                <div class="col-12 pt-4">

                    <label id="id_label_textarea" class="label_textarea">Подробное описание</label>

                    <div id="borderId" style="width: 100%;">
                        <textarea asp-for="UpdateProduct.Description" id="id_textarea" class="textarea_custom" 
                            onblur="TextareaEmpty('id_label_textarea','id_textarea','borderId','id_span_label')" 
                            onclick="TextareaChangesStyle('id_label_textarea','id_textarea','borderId','id_span_label')"></textarea>
                    </div>
                    <span id="id_span_label" class="span_label_textarea"></span>

                    <span asp-validation-for="UpdateProduct.Description" class="text-danger"></span>
                </div>

                <div class="form_input_custom mt-3">
                    <input asp-for="UpdateProduct.MainImageUrl" required autocomplete="off" oninput="newimgproduct(this,true)" />

                    <label asp-for="UpdateProduct.MainImageUrl" for="name" class="label_name_input">
                        <span class="content_name_input">Url Изображения</span>
                    </label>
                    <span asp-validation-for="UpdateProduct.MainImageUrl" class="text-danger"></span>  
                </div>

               @* Добовляем/Удаляем вторичные изображения*@
                <div class="ms-3 col-5 text-lg-start">
                    <label asp-for="UpdateProduct.SecondaryImages" class="control-label label_secondary_inputs pt-2"></label>
                </div>
                <div class="col-12 pb-3">

                    <table class="table">
                        <tr>
                            <td>
                                <div id="second_images">
                                    @if (Model.Images.Count > 0)
                                    {
                                        @for (int i = 1; i <= Model.Images.Count; i++)
                                        {
                                            <div class="form_input_secondary_custom mt-3" id="Images[@i]">
                                                <input asp-for="@Model.Images[@i-1]" name="Images" type="text" required autocomplete="off" />
                                                <label for="name" class="label_name_input_secondary">
                                                    <span class="content_name_input_secondary"></span>
                                                </label>
                                            </div>
                                        }
                                    }
                                </div>
                            </td>
                            <td class="col-1 text-end">
                                <div id="delete_url">
                                    @if (Model.Images.Count > 0)
                                    {
                                        @for (int i = 1; i <= Model.Images.Count; i++)
                                        {
                                            <div class="pb-1 container_btn_custom mt-3" id="Btn[@i]">

                                                <a class="btn_custom i_custom" onclick="deleteImages('Images[@i]','Btn[@i]')">
                                                    <i class="fas fa-trash"></i>
                                                </a>

                                            </div>
                                        }
                                    }
                                </div>
                            </td>
                        </tr>
                    </table>

                    <div class="col-3">

                        <input asp-for="Images" type="button" value="Добавить" class="btn btn-outline-primary form-control" onclick="addImages()" />

                    </div>
                    <span asp-validation-for="UpdateProduct.SecondaryImages" class="text-danger"></span>
                </div>

                <div class="form_input_custom mt-3">
                    <input asp-for="UpdateProduct.Price" required autocomplete="off" />

                    <label asp-for="UpdateProduct.Price" for="name" class="label_name_input">
                        <span class="content_name_input">Цена</span>
                    </label>
                    <span asp-validation-for="UpdateProduct.Price" class="text-danger"></span>
                </div>

                <div class="row p-3">
                    <div class="col-6">

                        <div class="container_btn_custom">
                            <a asp-action="ProductIndex" class="btn_custom a_custom">Вернуться</a>
                        </div>

                    </div>
                    <div class="col-6">

                        <div class="container_btn_custom">
                            <button type="submit" class="btn_custom a_custom">Обновить </button>                           
                        </div>

                    </div>

                </div>
            </div>

            <div class="col-3">

                <div id="new_product">
                </div>

                <div id="carouselExampleDark" class="carousel carousel-blue slide carousel-fade" data-bs-ride="carousel">
                    <div id="new_products" class="carousel-inner">
                    </div>
                </div>

            </div>

        </div>

    </div>

</form>

<div class="pb-5"></div>


@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}